我们在写javascript的时候会遇见很多兼容问题，大部分是ie9以下浏览器和其他浏览器的区别。下面整理每次遇见的兼容问题。
我们常使用的兼容方法是if或者||符号
1、addEventListener和attachEvent 事件绑定
<!DOCTYPE html>
<html>
<head>
<title>事件绑定</title>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
if(oBtn.attachEvent){
oBtn.attachEvent("onclick",function(){
alert("a");
});
oBtn.attachEvent("onclick",function(){
alert("b");
});
}else{
oBtn.addEventListener("click",function(){
alert("a")
},false);
oBtn.addEventListener("click",function(){
alert("b")
},false);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮">
</body>
</html>这样每次写的时候比较麻烦，我们可以把这个兼容性封装下，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>事件绑定封装</title>
<script>
function myAddEvent(obj,ev,fn){//obj代表绑定事件的元素，ev代表事件（比如click），fn代表执行的函数
if(obj.attachEvent){
obj.attachEvent("on"+ev,fn);
}else{
obj.addEventListener(ev,fn,false);
}
}
window.onload=function(){
var oBtn=document.getElementById("btn1");
myAddEvent(oBtn,"click",function(){
alert("a");
});
myAddEvent(oBtn,"click",function(){
alert("b");
});
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮">
</body>
</html>2、removeEventListener和detachEvent 删除事件
3、ev和event
示例：
<!DOCTYPE html>
<html>
<head>
<title>event兼容测试</title>
<script>
window.onload=function(){
// document.onclick=function(ev){
// var oEvent=ev || event;
// console.log(oEvent);
// }
document.onclick=function(event){
var oEvent=event || window.event;
console.log(oEvent);
}
}
</script>
</head>
<body>
</body>
</html>4、currentStyle(ie)和getComputedStyle(非ie)获取元素的当前样式封装
<!DOCTYPE html>
<html>
<head>
<title>获取样式兼容写法</title>
<script>
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj)[name];
}
}
window.onload=function(){
oDiv=document.getElementById("div1");
// alert(getStyle(oDiv,"width"));
alert(getStyle(oDiv,"background"));
// alert(getStyle(oDiv,"backgroundColor"))
}
</script>
</head>
<body>
<div id="div1" style="width:100px; height:100px; background:#f00;"></div>
</body>
</html>
5、new XMLHttpRequest()和new ActiveXObject("Microsoft.XMLHTTP")封装一个get请求
function ajax(url,fnSucc,fnFaild){
// 第一步：创建ajax对象
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
// 第二步：链接服务器
// open(方法，文件名即地址，异步传输)
oAjax.open("GET",url,true);
// 第三步：发送请求
oAjax.send();
// 第四步：接收返回
oAjax.onreadystatechange=function(){
if(oAjax.readyState===4){//判断浏览器和服务器进行到哪一步了。4代表读取编译完成
if(oAjax.status===200){//成功
fnSucc(oAjax.responseText);//把成功结果传递给成功函数
}else{
if(fnFaild){
fnFaild(oAjax.status);//把错误状态码传递给失败函数
}
}
}
}
}调用
ajax("a.txt",function(str){
alert(str);
},function(error){
alert(error);
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。